*{
    margin: 0;
    padding: 0;
}
.s-title{/*秒杀标题区*/
    width: auto;
    height: 60px;
    margin-top: 30px;
    /* background-color: rgb(92, 237, 56); */
}
.s-title1{/*秒杀区 1 */
    width: 100%;
    height: 60px;
    margin: auto;
    /* background-color: gray; */
}
.s-title1 a {
    width: 90%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
    background: rgb(245, 45, 31);
    text-decoration: none;
    color: #fff;
    transform: skewX(-45deg);
    border: 1px solid gray;
}
.title1-satr{/*秒杀区 1 ：即将开始 */
    transform: skewX(45deg);
    font-size: 17px;
    color: #fff;
}

.s-title2,.s-title3,.s-title4{ /*秒杀区 2,3,4框 */
    width: 100%;
    height: 60px;
    /* background-color: rgb(238, 247, 61); */
}
.title2 , .title3 , .title4 , .but{/*秒杀区 2,3,4四边形  */
    transform: skewX(45deg);
    font-size: 17px;
    color: rgb(53, 52, 52);
}
.s-title2 a ,.s-title3 a ,.s-title4 a{/*秒杀栏 文字 */
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    transform: skewX(-45deg);
    border: 1px solid gray;
    margin-left: 10px;
    background-color: rgb(255,107,55);
    /* background: rgb(176, 216, 18); */
}
.but{/*即将开始按钮*/
    border-radius: 30px;
    width: 70px;
    height: 30px;
    font-size: 12px;
    color: darkgrey;
    border-color: lightgrey;
}
.box{/*商品总4区*/
    margin-top: 10px;
    /* border: 1px solid black; */
    /* background-color: rgb(13, 13, 194); */
}
.commodity{/*商品区*/
    width: 95%;
    height: 380px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    /* background-color: rgb(69, 222, 22); */
}
.comm{/*  li  */
    width: 90%;
    height: 360px;
    margin: auto;
    margin-top: 10px;
    /* border: 1px solid gray; */
    background-color: #f4f4f4;

    /* background-color: blueviolet; */
}
.comm-pic{/*  图片区  */
    width:90%;
    height: 50%;
    margin: auto;
    margin-top: 20px;
    margin-left: 12px;
    float: left;
    /* background-color: #fff; */
}
.comm-pic img{
    width: 100%;
    height: 100%;
}
.comm-msg{/*  商品信息区  */
    width: 95%;
    height: 45%;
    margin-top: 10px;
    /* background-color: darkgreen; */
}
.info{/*  商品名称  */
    width: 100%;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    /* background-color: #fff; */
}
.price{/*  价格区  */
    width: 100%;
    height: 40px;
    float: left;
    margin-top: 30px;
    /* background-color: rgb(250, 10, 190); */
}
.money{/*  ￥符号区  */
    width: 5%;
    height: 20px;
    float: left;
    margin-top: 10px;
    text-align: center;
    color: red;
    /* background-color: rgb(239, 141, 22); */
}
.new-price{/*  秒杀价格区  */
    width: 30%;
    height: 30px;
    float: left;
    /* background-color: rgb(220, 239, 45); */
}
.new-price span{
    font-size: 32px;
    color: red;
    font-weight: bolder;
}
.old-price{/*  原价格区  */
    width: 20%;
    height: 20px;
    float: left;
    margin-top: 10px;
    /* background-color: rgb(194, 16, 230); */
    text-decoration: line-through;
    color: gray;
}
.s-but{/*  立即抢购按钮区  */
    width: 30%;
    height: 40px;
    float: left;
    border-radius: 4px;
    color: gray;
    color: #fff;
    border: #fff;
    margin-left: 30px;
    background-color: red;  
}
.s-but span{
    display: block;
    padding-left: 7px;
    padding-top: 10px;
}
.s-percent{/*  抢购区百分比  */
    width: auto;
    color: gray;
    float: left;
    margin-top: 10px;
}
.s-percent span{
    font-size: 12px;
}